<template>
	<view class="set">
		<view class="list">
			<view class="item" @click="onPageTap('user')">
				<span class="title">账户安全</span>
			</view>
			<view class="item" @click="onPageTap('address')">
				<span class="title">地址管理</span>
			</view>
		</view>
		<!-- <view class="list">
			<view class="item no-arrow">
				<span class="title">消息提醒</span>
				<switch class="btn-open" color="#FE6B00" :checked="dataObj.remind" @change="switchChange"/>
			</view>
			<view class="item" @click="onPageTap('course')">
				<span class="title">开课提醒</span>
			</view>
		</view> -->
		<view class="list">
			<!-- #ifdef APP-PLUS -->
			<view class="item" @click="onClearTap('clear')">
				<span class="title">清除缓存</span>
				<span class="content">{{dataObj.cacheSize}}</span>
			</view>
			<!-- #endif -->
			<view class="item" @click="onPageTap('serve')">
				<span class="title">服务协议</span>
			</view>
			<view class="item" @click="onPageTap('privacy')">
				<span class="title">隐私协议</span>
			</view>
			<view class="item" @click="onPageTap('about')">
				<span class="title">关于我们</span>
			</view>
			<!-- <view class="item" @click="onPageTap('renew')">
				<span class="title">更新版本</span>
				<span class="content">当前为最新版</span>
			</view> -->
			<!-- <view class="item" @click="onPageTap('common')">
				<span class="title">常见问题</span>
			</view>
			<view class="item" @click="onPageTap('manual')">
				<span class="title">使用手册</span>
			</view> -->
			<!-- <view class="item" @click="onPageTap('contact')">
				<span class="title">联系我们</span>
			</view> -->
		</view>
		<view class="block" @click="onUnsubscribeTap">
			<view class="btn">注销账户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageObj: {
					user: './account-safe', // 账户安全
					address: '../address/list', // 地址管理
					course: './course-remind', // 开课提醒
					serve: './detail?type=serve', // 服务协议
					privacy: './detail?type=privacy', // 隐私协议
					about: './detail?type=about', // 关于我们
					common: './detail?type=common', // 常见问题
					manual: './detail?type=manual', // 使用手册
					contact: '' // 联系我们
				},
				dataObj: {
					cacheSize: '0B',
					remind: true
				}
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			const self = this;
			plus.cache.calculate(function(size) { //size是多少个字节单位是b
			    //做下面相应的处理
			    if (size < 1024) {
			        self.dataObj.cacheSize = size + 'B';
			    } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
			        self.dataObj.cacheSize = Math.floor(size / 1024 * 100) / 100 + 'KB';
			    } else if (size / 1024 / 1024 >= 1) {
			        self.dataObj.cacheSize = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
			    }
			});
			// #endif
		},
		methods: {
			onClearTap() {
				// #ifdef APP-PLUS
				const self = this;
				//使用plus.cache.clear 清除应用中的缓存数据
				plus.cache.clear(function() {
					uni.showToast({
						title: '清除成功!',
						icon: 'none',
						success() {
							self.dataObj.cacheSize = '0B'
						}
					})
				});
				// #endif
			},
			// 页面操作
			onPageTap(key) {
				const url = this.pageObj[key];
				if (!url) return false;
				uni.navigateTo({
					url: url
				});
			},
			// 开课提醒事件
			switchChange(e, key) {
				let value = e.detail.value;
				let that = this;
				that.dataObj['remind'] = false;
				if (!value) {
					uni.showModal({
						title: '提示',
						content: '您确定关闭消息提醒吗？',
						confirmColor: '#FE6B00',
						success: function (res) {
							if (res.confirm) {
								// 用户点击确定
								that.postRemind();
							} else if (res.cancel) {
								// 用户点击取消
								that.dataObj['remind'] = true;
							}
						}
					});
				} else {
					that.postRemind();
				}
			},
			// 注销账户
			onUnsubscribeTap() {
				let that = this;
				uni.showModal({
					title: '警告',
					content: '您确定注销该账户吗？注销后该用户信息将被清除，后续将无法登录！',
					confirmColor: '#FE6B00',
					success: function (res) {
						if (res.confirm) {
							// 退出登录
							that.postDelUser();
						}
					}
				});
			},
			// 提交注销用户
			postDelUser() {
				this.$Requset({
					url: this.$Api['account']['delUser'],
					data: {},
					success: (res) => {
						const { status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 清除token
						uni.removeStorageSync('login_token');
						// 清除用户信息
						uni.removeStorageSync('userInfo');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/account/login'
							});
						}, 1000);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 请求提醒接口
			postRemind() {
				console.log('请求提醒接口');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.set{
		padding: 18rpx 0 2rpx;
		.list{
			border-radius: 22px;
			background-color: #FFFFFF;
			padding: 0 0 0 36rpx;
			margin-bottom: 18rpx;
			.item{
				position: relative;
				height: 108rpx;
				line-height: 108rpx;
				border-bottom: 1rpx solid #EAEFF1;
				padding-right: 76rpx;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -16rpx;
					right: 36rpx;
					width: 32rpx;
					height: 32rpx;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100%;
					background-image: url(../../../static/images/common/arrow-right.png);
				}
				&:nth-last-child(1){
					border-bottom: none;
				}
				.title{
					float: left;
					font-size: 30rpx;
					color: #1A1A1A;
				}
				.content{
					float: right;
					font-size: 26rpx;
					color: #7F7F7F;
				}
			}
			.no-arrow{
				&::after{
					display: none;
				}
				.btn-open{
					position: absolute;
					z-index: 1;
					top: 50%;
					margin-top: -32rpx;
					right: 24rpx;
					width: 104rpx;
					line-height: 64rpx;
					height: 64rpx;
					text-align: right;
					transform: scale(0.8);
				}
			}
		}
		.btn{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			color: $color-common;
			text-align: center;
		}
	}
</style>
